@extends('home.base.base')

@section('content')


    <div class="jf-container">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <style type="text/css">
            .banner {width:685px;height:390px;overflow:hidden;}
        </style>
        <script>

            $(function(){
                var index = 1;
                $(".banner-right-item-group li").eq(0).css({"background":"#259bf0"});
                function animate() {
                    setTimeout(function () {
                        $(".banner img").fadeOut('slow');
                        $(".banner img").eq(index).fadeIn('slow');
                        $(".banner-right-item-group li").css({"background":"#016cb9"});
                        $(".banner-right-item-group li").eq(index).css({"background":"#259bf0"});
                        index++;if(index> {{ count($query->getBannerList()) }}-1 ) index=0;
                        console.log(index);
                        animate();
                    }, 3000);
                }
                animate();
            });

        </script>
        <div class="jf-row">
            <div class="jf-banner-block">
                <div class="banner">
                    @foreach($query->getBannerList() as $key => $val )
                        <img src="{{ $val->cover }}" style="width:685px;height:390px;"/>

                    @endforeach
                </div>
                <div class="banner-right">
                    <ul class="banner-right-item-group">
                        @foreach($query->getBannerList() as $key => $val )
                            <li class="banner-right-item"><a href="#" >{{ mb_substr($val->title,0,14) }}</a></li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <div class="jf-top-list">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">热门排行<span class="jf-play"><span class="jf-tran"></span></span></a>
                    {{--<span class="jf-fr jf-fw"><span>周排行</span>&nbsp;|&nbsp;<span>月排行</span></span>--}}
                </div>
                <ul class="jf-top-list-item-group">
                    @foreach($query->getTop() as $key => $val )
                        <li class="jf-top-list-item"><span class="jf-num">{{ $key+1 }}</span><a href="/post/{{$val->post_id}}" class="jf-post-title">{{mb_substr($val->title,0,19)}}</a></li>
                    @endforeach

                </ul>
            </div>
        </div>
{{--
        <div class="jf-row">
            <img src="{{$query->getAd(3)[0]['cover']}}" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="{{ $query->getAd(4)[0]['cover'] }}" />
        </div>--}}
{{--

        <div class="jf-row">
            <div class="jf-col-209-365 jf-fl jf-mr18 jf-tag-color jf-relative">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">热门标签<span class="jf-play"><span class="jf-tran"></span></span></a>
                </div>
                <ul class="jf-tag-group">

                    @foreach( ($tagConfig = json_decode($query->config('tag'),true)) as $key => $val )
                        @if($key < 9)
                        <li>
                            @foreach($val[0] as $k => $v)
                                <a href="/search/{{$v}}">{{$v}}</a>&nbsp;
                            @endforeach
                            <span>&gt;</span>
                            <div class="jf-sub-tag">
                                @foreach($val[1] as $k => $v)
                                    <a href="/search/{{$v}}">{{$v}}</a>
                                @endforeach
                            </div>
                        </li>
                        @endif
                    @endforeach

                </ul>
            </div>
            <div class="jf-col-977-365 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">精品推荐<span class="jf-play"><span class="jf-tran"></span></span></a>
                </div>
                <div class="jf-pannel cls">
                    @foreach($query->getRec(1,6) as $key => $val)
                        <div class="jf-img-word">
                            <div ><img src="{{$val->cover}}" style="float:left;width:185px;height:97px;"></div>
                            <div class="jf-pd-16-24">
                                <h5 ><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a></h5>
                                <div class="jf-word">
                                   {{mb_substr($val->description,0,53)}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>
--}}

       {{-- <div class="jf-row">
            <img src="/public/statics/img/system/banner2.jpg"  />
        </div>--}}

        <div class="jf-row cls">
            <div class="jf-w-881 jf-h-327 jf-fl  jf-recent">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">最新资讯<span class="jf-play"><span class="jf-tran"></span></span></a>
                </div>
                <div class="jf-fl jf-w-50p  jf-pd-16">

                    @if($item = $query->getRec(2,7) && !empty($item))
                        <div class="cls">
                            <div class="jf-fl"><img  src="{{$item[0]->cover}}" style="width:179px;height:108px;" /></div>
                            <div class="jf-article">
                                <div class="jf-title"><a href="/post/{{$item[0]->id}}" class="jf-post-title">{{mb_substr($item[0]->title,0,12)}}</a></div>
                                <div class="jf-desc">{{mb_substr($item[0]->description,0,56)}}</div>
                            </div>
                        </div>
                    @endif

                    <ul  class="jf-ul">
                    @foreach($query -> getRec(2,7) as $key => $val )
                        <li class="jf-li"><span class="jf-point">·</span><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a><span class="jf-fr">{{mb_substr($val->created_at,0,10)}}</span></li>
                    @endforeach
                    </ul>

                </div>
                <div class="jf-fl jf-w-50p  jf-pd-16">
                    @if($item = $query->getRec(3,7) && !empty($item))
                        <div class="cls">
                            <div class="jf-fl"><img  src="{{$item[0]->cover}}" style="width:179px;height:108px;"  /></div>
                            <div class="jf-article">
                                <div class="jf-title"><a href="/post/{{$item[0]->id}}" class="jf-post-title">{{mb_substr($item[0]->title,0,12)}}</a></div>
                                <div class="jf-desc">{{mb_substr($item[0]->description,0,56)}}</div>
                            </div>
                        </div>
                    @endif

                    <ul  class="jf-ul">
                        @foreach($query -> getRec(2,7) as $key => $val )
                            <li class="jf-li"><span class="jf-point">·</span><a href="/post/{{$val->id}}" class="jf-post-title">{{$val->title}}</a><span class="jf-fr">{{mb_substr($val->created_at,0,10)}}</span></li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="jf-w-313 jf-h-327 jf-fl  jf-p-0-12 jf-recent2">
                @foreach($query->getRec(4,3) as $key=>$val)
                    <div class="cls">
                        <div class="jf-fl"><img src="{{$val->cover}}" style="width:109px;height:90px;"/></div>
                        <div class="jf-fl jf-article">
                            <div class='jf-title'><a href="/post/{{$val->id}}" class="jf-post-title">{{mb_substr($val->title,0,10)}}</a></div>
                            <div class="jf-desc" >{{mb_substr($val->description,0,50)}}</div>
                        </div>
                    </div>
                    @if($key < 2)
                        <div class="jf-line"></div>
                    @endif
                @endforeach
            </div>
        </div>
        {{--
        <div class="jf-row cls jf-brand">
            <div class="jf-w-591 jf-h-264 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">品牌推荐<span class="jf-play"><span class="jf-tran"></span></span></a>
                </div>
                <div class="jf-set cls">
                    <ul>
                        @foreach($query->getFriend(2,20) as $key => $val )
                            <li class="jf-fl"><img src="{{$val->cover}}" style="width:90px;height:36px;"/></li>
                        @endforeach

                    </ul>
                </div>
            </div>
            <div class="jf-fl jf-w-22">&nbsp;</div>
            <div class="jf-w-587 jf-h-264 jf-fl ">
                <div class="jf-top-list-header">
                    <a href="#" class="jf-button">自媒体平台推荐<span class="jf-play"><span class="jf-tran"></span></span></a>
                </div>
                <div class="jf-set">
                    <ul class="jf-qrcode cls">
                        @foreach($query->getFriend(3,12) as $key => $val )
                            <li class="jf-fl"><img src="{{$val->cover}}" style="width:73px;height:73px;" /><div>加分科技</div></li>
                        @endforeach

                    </ul>
                </div>
            </div>
        </div>--}}


      {{--  @include('home.base.float')--}}

       {{-- <div class="jf-row">
        @include('home.base.friend')
        </div>--}}
---

    </div>



@endsection